//sInitColor is a global variable. It holds the value of the selected color in the color dialog box when it displays
var sInitColor = null;
//sPersistValue holds the value of the saved innerHTML
var sPersistValue
function doInit(){
for (i=0; i<document.all.length; i++)
//ensure that all document elements except the content editable DIV are unselectable
document.all(i).unselectable = "on";
oDiv.unselectable = "off";
//clear any text in the Document window and set the focus
oDiv.innerHTML="";
oDiv.focus();
//call routines to populate the drop-down list boxes on the toolbar
getSystemFonts();
getBlockFormats();
window.resizeTo(730,560);
goContext();
}
//This function works for all of the command identifiers used in this page
function callFormatting(sFormatString){
document.execCommand(sFormatString);
}
//Fonts routines
//getSystemFonts uses the dialog helper object to return an array of all of the fonts on the user's system, then populates a drop-down listbox in the toolbar with the array elements
function getSystemFonts(){
var a=dlgHelper.fonts.count;
var fArray = new Array();
var oDropDown = oToolBar.createDropDownListAt("4");
oDropDown.setAttribute("id","FontNameList");
for (i = 1;i < dlgHelper.fonts.count;i++){
fArray[i] = dlgHelper.fonts(i);
var aOptions = oDropDown.getOptions();
var oOption = document.createElement("OPTION");
aOptions.add(oOption);
oOption.text = fArray[i];
oOption.Value = i;
}
//attaching the onchange event is necessary in order to detect when a user changes the value in the drop-down listbox
oDropDown.setAttribute("onchange",ChangeFont);
}
//changeFontSize detects the value of the item in the drop-down listbox and applies the value to the font of the selected text
function changeFontSize(){
var sSelected=oToolBar.getItem(6).getOptions().item(oToolBar.getItem(6).getAttribute("selectedIndex"));
//getBlockFormats uses the dialog helper object to return an array of all of the block formats on the user's system, then populates a drop-down listbox in the toolbar with the array elements
function getBlockFormats(){
var a=dlgHelper.blockFormats.count;
var fArray = new Array();
var oDropDown = oToolBar.createDropDownListAt("5");
oDropDown.setAttribute("id","FormatList");
for (i = 1;i < dlgHelper.blockFormats.count;i++)
{
fArray[i] = dlgHelper.blockFormats(i);
var aOptions = oDropDown.getOptions();
var oOption = document.createElement("OPTION");
aOptions.add(oOption);
oOption.text = fArray[i];
oOption.Value = i;
}
//attach the onchange event
oDropDown.setAttribute("onchange",ChangeFormat);
}
//ChangeFormat detects the value of the item in the drop-down listbox and applies the value to the font of the selected text
function ChangeFormat(){
var sSelected=oToolBar.getItem(5).getOptions().item(oToolBar.getItem(5).getAttribute("selectedIndex"));
//callColorDlg uses the dialog helper object's ChooseColorDlg method to open the color dialog box, then changes the font or back color of the selected text
function callColorDlg(sColorType){
if (sInitColor == null)
//display color dialog box
var sColor = dlgHelper.ChooseColorDlg();
else
var sColor = dlgHelper.ChooseColorDlg(sInitColor);
//change decimal to hex
sColor = sColor.toString(16);
//add extra zeroes if hex number is less than 6 digits
if (sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
//change color of the selected text
document.execCommand(sColorType, false, sColor);
sInitColor = sColor;
oDiv.focus();
}
//VerticalMode changes the orientation of the text from left to right to top to bottom
function VerticalMode(){
if (oDiv.style.writingMode == 'tb-rl')
oDiv.style.writingMode = 'lr-tb';
else
oDiv.style.writingMode = 'tb-rl';
}
//SaveDocument uses the common dialog box object to display the save as dialog, then writes a textstream object from the value of the div's innerHTML property
function SaveDocument(){
//Setting CancelError to true and using try/catch allows the user to click cancel on the save as dialog without causing a script error
var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile(cDialog.filename, ForReading);
var r = f.ReadAll();
f.close();
oDiv.innerHTML=r;
sPersistValue=oDiv.innerHTML;
}
oDiv.focus();
}
catch(e){
var sCancel="true";
return sCancel;}
}
//NewDocument creates a new "document" by clearing the content of the div. If there is any new content in the div, the user is asked whether or not to save
function NewDocument(){
var answer = checkForSave();
if (answer) {var sCancel = SaveDocument();
if (sCancel) return;
oDiv.innerHTML="";}
if (answer==false)
oDiv.innerHTML="";
oDiv.focus();
}
//This function checks to see if the div has new text, then displays a modal dialog box if appropriate
function checkForSave()
{
if ((oDiv.innerHTML!=sPersistValue)&&(oDiv.innerHTML !=""))
var checkSave=showModalDialog('dcheckForSave.htm','','dialogHeight:125px;dialogWidth:250px;scroll:off');
else
var checkSave=false;
return checkSave;
}
//this function is used to call other functions when the user clicks on a menu item. These are the same functions that are called by the toolbar buttons.
function CallMenuFunction(){
var menuChoice = event.result;
switch(menuChoice){
case "open":
LoadDocument();
break;
case "new":
NewDocument();
break;
case "save":
SaveDocument();
break;
case "exit":
window.close();
break;
case "cut":
callFormatting('Cut');
break;
case "copy":
callFormatting('Copy');
break;
case "paste":
callFormatting('Paste');
break;
case "bold":
callFormatting('Bold');
break;
case "underline":
callFormatting('Underline');
break;
case "italic":
callFormatting('Italic');
break;
case "fontColor":
callColorDlg('ForeColor');
break;
case "highlight":
callColorDlg('BackColor');
break;
case "about":
goContext();
break;
default:
break;
}
}
//These functions create and display the splash screen and are used when the application is launched (called by onInit function) as well as when the user clicks help/about on the menu
<DIV STYLE="padding:20px; font-size:8pt; line-height:1.5em; font-family:verdana; color:black;">This HTML Editor is created entirely with DHTML technologies and is provided as an example for developers using Internet Explorer 6.
